// This file is part of Indico.
// Copyright (C) 2002 - 2025 CERN
//
// Indico is free software; you can redistribute it and/or
// modify it under the terms of the MIT License; see the
// LICENSE file for more details.

@use 'base' as *;
@use 'design_system';
@use 'partials/buttons' as *;
@use 'widgets/create_event_button';

.confirmation-dialog .body ul.categ-list {
  padding-left: 13px;
  margin: 0;

  span.event-date {
    padding-left: 10px;
    color: #888;
    font-size: 0.9em;
    margin: 0;
  }

  span.event-title {
    font-style: italic;
  }
}

.category-container {
  --horizontal-padding: 3em;

  display: grid;
  grid-template-columns: 1fr minmax(0, auto);
  grid-template-areas:
    'hd hd'
    'ct sb';
  gap: 0 1em;

  background: #fff;
  margin-bottom: 0.75em;
  overflow-x: hidden;

  @media (width < 66em) {
    grid-template-columns: auto;
    grid-template-areas:
      'hd'
      'ct'
      'sb';
    gap: 1em;
  }
}

.category-header {
  grid-area: hd;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 1em;

  background-image: linear-gradient(to bottom, #fcfcfc, #f2f2f2);
  border-bottom: 1px solid #e6e6e6;
  border-top: 1px solid #fff;
  padding: 1.5em var(--horizontal-padding);
  line-height: initial;

  .back-button {
    margin-top: 0.4em;
  }
}

.category-title {
  flex: 1 1 auto;
  font-size: 2em;
  color: $dark-orange;
  font-weight: normal;
  margin: auto;
  max-width: 66em;
  text-align: left;

  .subtitle {
    font-style: italic;
    font-size: 0.8em;
  }
}

#category-toolbar {
  flex: 0 1 auto;
  display: flex;
  flex-wrap: wrap;
  justify-self: flex-end;
  width: fit-content;

  .create-event-button button {
    border-radius: 2px;
  }

  ind-menu > menu {
    @extend %menu;
  }
}

.category-description {
  ul,
  ol {
    margin-left: 3em;
  }

  :is(ul, ol) :is(ul, ol) {
    margin-left: 1.2em;
  }

  :is(ul, ol) + p {
    margin-top: 1em;
  }
}

.category-content-wrapper {
  grid-area: ct;
  overflow-x: hidden;
  padding: 2em var(--horizontal-padding);
}

.category-stats-container {
  padding-top: 40px;

  .ui.segments > .segment {
    width: 50%;
  }

  .ui.statistic > .value {
    font-size: 3rem !important;
  }
}

.category-content {
  max-width: 66em;
  margin: 0 auto;
}

.category-info {
  @include font-family-modern-body();

  color: var(--text-secondary-color);
  font-size: 1.2em;
  min-height: 0.3em;
  margin: 0 0 2em 0;

  .category-logo {
    margin-right: 1em;
  }
}

.category-sidebar {
  grid-area: sb;
  padding: 1em;

  background: #fafafa;
  background-image: linear-gradient(to bottom, #fafafa 95%, #fff 100%);
  border-left: 1px solid #f2f2f2;
  color: #666;

  @media (width < 66em) {
    padding: 2em var(--horizontal-padding);
  }

  @media (width >= 66em) {
    width: 26em;
  }

  &:empty {
    padding: 0;
  }

  > * {
    margin: 0 auto;
    max-width: 62rem;
  }

  > .title {
    border-bottom: 1px solid #ebebeb;
    box-shadow: 0 1px 0 #fafafa;
    margin-top: 20px;
    margin-bottom: 10px;
    padding-bottom: 0.2em;
    display: flex;
    align-items: center;
    justify-content: space-between;

    h2 {
      margin: 0;
      color: #999;
      font-weight: normal;

      &::before {
        margin-right: 0.5em;
        vertical-align: -10%;
      }
    }

    .actions {
      float: right;
    }

    .more-icon {
      margin: 0.8em 1em 0 0;
    }
  }

  ul {
    list-style-type: none;
    padding: 0;
    font-size: 1.1em;
  }

  .material-show {
    @include transition(color);

    -webkit-user-select: none;
    -moz-user-select: none;
    user-select: none;

    cursor: pointer;
    color: $dark-gray;
    margin: 0.2em 0.5em 0 0;

    &:hover {
      color: $gray;
    }

    .material-title-icon {
      font-size: 0.8em;
      padding-top: 0.2em;
    }
  }

  li h3 {
    font-family:
      Helvetica Neue,
      Helvetica,
      Verdana,
      Arial,
      sans-serif;
    font-weight: normal;
    font-size: 1em;
    margin-top: 0;
    margin-bottom: 0.5em;
    margin-left: 0.2em;
    display: inline-block;
    line-height: 1em;
    color: $dark-gray;

    &:hover {
      color: $gray;
    }
  }
}

.main-page-list {
  a {
    color: $dark-blue;
  }

  li {
    margin-bottom: 0.5em;
    list-style-type: none;

    .title {
      @include ellipsis();

      font-size: 1em;
      display: block;
      max-width: 100%;
    }

    .timing {
      font-size: 0.8em;
      display: block;
      margin-top: 0.2em;
      color: #777;
      text-shadow: 1px 1px 0 #fefefe;
    }
  }
}

#manager-list {
  li {
    margin-bottom: 0.2em;

    &::before {
      margin-right: 0.5em;
    }
  }
}

ul.category-list {
  font-size: 1.2em;
  list-style-type: none;
  padding: 0;

  border-left: 1px solid #fafafa;
  border-right: 1px solid #e6e6e6;

  li {
    @include transition(color);

    -webkit-user-select: none;
    -moz-user-select: none;
    user-select: none;

    background: #f2f2f2;
    display: flex;
    align-items: center;
    line-height: 2.5em;
    color: #b3b3b3;
    cursor: pointer;

    border-top: 1px solid #fafafa;
    border-bottom: 1px solid #e6e6e6;

    a {
      @include transition(color);
      @extend %link;
      flex: 1;
      display: block;
      padding: 0 0 0 1em;
      position: relative;

      &.invisible-block {
        color: inherit !important;
        text-decoration: inherit !important;
        display: block;
        padding: 0 !important;
      }
    }

    .category-description {
      display: flex;
      align-items: center;
      flex-shrink: 0;
      gap: 0.5em;

      .number-events {
        color: var(--text-secondary-color);
        margin-right: 0.5em;
      }

      .protection {
        display: flex;
        height: 1em;
        width: 1em;
        color: #a36264;

        &::before {
          @extend %icon;
          @extend %icon-shield;
        }

        > span {
          @extend %visually-hidden;
        }

        &.not-protected {
          opacity: 0;
        }
      }
    }

    &:hover {
      color: $light-black;

      &::after {
        color: var(--text-secondary-color);
      }
    }

    &::after {
      @include transition(color);
      @extend %icon-arrow-right-sparse;
      color: #ccc;
      font-family: 'icomoon-ultimate';
      margin-right: 1em;
      margin-left: 1em;
      flex-shrink: 0;
    }
  }
}

ul.category-resource-qtip {
  list-style: none;
  padding-left: 0;
  margin: 0;
  color: #888;
  font-size: 11px;
  line-height: 15px;
}

#eventCreationForm {
  .form-group {
    .form-field {
      padding: 0;
    }
  }
}

.event-list {
  h3 {
    color: #555;
    font-weight: normal;
    font-size: 18px;
    margin-top: 20px;
    margin-left: 40px;
    padding: 0;
    border-bottom: 1px solid #ebebeb;

    &.current-month {
      border-bottom: 1px solid #aaa;

      span {
        padding: 5px 5px 0 5px;
        color: #2f2506;
        background-color: #f6e8bd;
        border-radius: 5px 5px 0 0;
        border-bottom: 1px solid #aaa;
      }
    }
  }

  ul {
    margin: 0;
    padding: 0;
    list-style-type: none;
    display: block;
  }

  li {
    margin: 0 0 10px 60px;
    padding: 0;
    display: flex;
    align-items: baseline;

    .list-name {
      display: flex;
      align-items: baseline;
    }

    .date {
      padding: 5px;
      margin-right: 10px;
      font-size: 13px;
      color: #444;
      flex-shrink: 0;
    }

    .event-icons {
      padding: 0 15px;
      font-size: 1.2em;
      white-space: nowrap;
      color: var(--text-secondary-color);
      max-width: 56px;
      min-width: 56px;

      a,
      a:hover {
        color: var(--text-secondary-color);
      }
    }

    .list-name a {
      @extend %link;
      font-size: 17px;
    }

    .today {
      font-size: 13px;
      color: #444;
      background-color: #f6e8bd;
      border-radius: 5px;
    }

    .protected {
      font-weight: normal;
      color: var(--text-secondary-color);
    }

    .ui.label {
      text-transform: uppercase;
      vertical-align: 20%;
    }
  }

  .toggle-hidden-events {
    @extend %link-button;
  }
}

.category-overview {
  width: calc(100vw - 300px);

  > .title {
    height: 30px;

    .text {
      font-size: 1.2em;
      font-style: italic;
      margin-left: 5px;
      margin-right: 5px;
    }

    .navigation a {
      padding: 5px;
    }
  }

  .category-table {
    display: block;
    overflow-x: auto;

    > table:not(.day) {
      border: 1px solid #aaa;
      border-collapse: separate;
      border-spacing: 1px;

      tr {
        background-color: #eee;
      }
    }

    table {
      width: 100%;
      border-collapse: collapse;

      th {
        background-color: #444;
        color: #fff;
        text-align: center;
        font-weight: normal;
        white-space: nowrap;
        padding: 1px 15px;
      }
    }

    td {
      padding: 0;
      vertical-align: top;

      &.day {
        vertical-align: top;
        padding: 5px;

        &:not(:empty) {
          min-width: 180px;
        }

        > .calendar-date {
          font-size: 1.5em;
          font-weight: bold;
          text-align: center;

          a {
            color: #aaa;
          }
        }

        table {
          tr {
            background-color: white;

            td {
              font-size: inherit;

              &.content-info {
                padding-left: 10px;
              }

              .location-info,
              .persons {
                font-size: 0.8em;
              }
            }
          }
        }
      }

      &.other-month {
        background-color: white;
      }
    }

    tr.event {
      & > td {
        padding: 8px 3px;
        font-size: 1.1em;
      }

      &:not(:first-of-type) td {
        border-top: 1px dotted #aaa;
      }

      .title .ui.label {
        text-transform: uppercase;
      }

      .category-icon {
        float: right;
        margin-left: 3px;
      }
    }

    td.time {
      font-style: italic;
      white-space: nowrap;
      width: 40px;
    }

    td.content-info {
      padding-left: 20px;

      table.timetable-entries {
        tr {
          &.contribution {
            background-color: #deebf8;
          }

          &.session {
            background-color: #fff1d5;
          }

          &.break {
            background-color: #e0ecd2;
          }

          &:not(:first-of-type) {
            td {
              border-top: 1px dashed #aaa;
            }
          }

          td {
            padding: 3px 2px;
          }
        }
      }
    }

    .location-info {
      max-width: 220px;
      text-overflow: ellipsis;
      overflow: hidden;
      color: darkblue;
    }

    .persons {
      color: darkgreen;
    }
  }
}

.category-overview-side-menu {
  .ui-datepicker {
    width: 192px;
  }

  #display-options {
    .form-group {
      margin-bottom: 1em;

      & > div {
        padding: 0;
        margin: 0;
      }
    }

    .form-label {
      min-height: 2em;
    }

    select {
      width: 100%;
    }
  }
}

.category-calendar-side-menu {
  .ui-datepicker {
    width: 192px;
  }
}

.category-calendar-page {
  @include indico-page();

  .DateInput_input {
    height: 34px;
  }

  .category-calendar-view {
    font-family: 'Roboto', sans-serif;

    .fc {
      line-height: normal;
    }

    // limit size of "more events" popover
    .fc-more-popover {
      max-height: 95%;
      max-width: 30%;
      overflow-y: auto;
    }

    // <a> elements used for day headers aren't links
    a.fc-col-header-cell-cushion,
    a.fc-daygrid-day-number {
      cursor: default;
      color: $black;
    }

    .fc-header-toolbar {
      .fc-button {
        // pretend it's an i-button...
        @include button();
        @include transition(color);
        @include i-button-states(
          $i-button-background-color,
          $default-border-color,
          $gray,
          $light-black,
          $black,
          false
        );

        &:disabled,
        &.disabled {
          @include button-disabled();
        }
      }

      .ongoing-events-info {
        font-style: italic;
        line-height: 2.1em;
        margin-right: 5px;
      }
    }
  }
}

.ongoing-events-dialog,
.all-events-dialog {
  max-height: 600px !important;
  overflow-y: scroll;

  ul {
    list-style-type: none;
    padding: 0 10px;
    margin-top: 0;
  }
}

#category-list {
  @extend %visually-hidden;
}
